<template>
	<view class="container">
		<view class="item">
			<view class="label" v-if="item.status == 1" style="color: #FF9A16; font-size: 28rpx;">待审核</view>
			<view class="label" v-else-if="item.status == 22" style="color: #FF9A16; font-size: 28rpx;">初审通过
			</view>
			<view class="label" v-else-if="item.status == 2" style="font-size: 28rpx;color: #FF9A16; ">待完成
			</view>
			<view class="label" v-else-if="item.status == 3" style="font-size: 28rpx; color: #999999; ">已拒绝
			</view>
			<view class="label" v-else-if="item.status == 4" style="font-size: 28rpx; color: #2BBC4A; ">已完成</view>
			<view class="item-cell flex-ac" style="border-bottom: 1rpx solid #f7f7f7; padding-bottom: 30rpx;">
				<!-- <view class="hd" style="color: #333; font-weight: bold;">送修时间：</view> -->
				<view class="bd">{{item.repairTime || '-'}}</view>
			</view>
			<view class="item-cell flex-b">
				<view class="hd">预计取车时间：</view>
				<view class="bd">{{item.takeCarTime || '-'}}</view>
			</view>
			<view class="item-cell flex-b">
				<view class="hd">申请人：</view>
				<view class="bd">{{item.applicant || '-'}}</view>
			</view>
			<view class="item-cell flex-b">
				<view class="hd">车牌号：</view>
				<view class="bd">{{item.mileage || '-'}}</view>
			</view>
			<view class="item-cell">
				<view class="hd">维修原因：</view>
				<view class="bd" style="margin-top: 20rpx;">{{item.reason || '-'}}</view>
			</view>
			<view class="item-cell flex-b">
				<view class="hd">维修人：</view>
				<view class="bd">{{item.completeUserName || '-'}}</view>
			</view>
			<view class="item-cell">
				<view class="hd">故障图片：</view>
				<view class="bd flex-wrap" style="margin-top: 20rpx;">
					<image class="img" :src="item.imgUrls" mode="aspectFill"></image>
				</view>
			</view>
			<view class="item-cell" style="border-top: 1rpx solid #f7f7f7;" v-if="item.failReason">
				<view class="hd">拒绝原因：</view>
				<view class="bd" style="margin-top: 20rpx;">{{item.failReason || ''}}</view>
			</view>
			<view class="item-cell flex-b" style="border-top: 1rpx solid #f7f7f7; margin-top: 0; padding-top: 30rpx;" v-if="item.completeTime">
				<view class="hd">完成时间：</view>
				<view class="bd">{{item.completeTime || ''}}</view>
			</view>
			<view class="item-cell flex-b" v-if="item.usedMaterials">
				<view class="hd">使用材料：</view>
				<view class="bd">{{item.usedMaterials	 || ''}}</view>
			</view>
			<view class="item-cell flex-b" v-if="item.repairCost">
				<view class="hd">维修费：</view>
				<view class="bd">{{item.repairCost || ''}}元</view>
			</view>
				<!-- <view class="btn-3 flexmid" v-if="item.status == 1" @click="review(index, item.id)">初审</view>
				<view class="btn-3 flexmid" v-if="item.status == 22" @click="finalView(index, item.id)">终审</view>
				<view class="btn-3 flexmid" v-if="item.status == 1" @click="edit(item.id)">编辑</view>
				<view class="btn-3 flexmid" style="width: 140rpx;" @click="lookDetail(item.id)">查看详情</view>
				<view class="btn-3 flexmid" style="width: 140rpx;" v-if="item.status == 2" @click="repairDone(item.id)">维修完成</view>
				<view class="btn-2 flexmid" v-if="item.status == 1 || item.status == 3 || item.status == 22" @click="del(index, item.id)">删除</view> -->
		</view>
		
		<view class="foot">
			<view class="btnBox flex-ac">
				<view class="btn-1 middle" v-if="item.status == 1" @click="review()">初审</view>
				<view class="btn-1 middle" v-if="item.status == 22" @click="finalView()">终审</view>
				<view class="btn-1 middle" v-if="item.status == 2" @click="repairDone()">维修完成</view>
			</view>
			<x-botSpace></x-botSpace>
		</view>
		
		<u-modal v-model="show" :title="title" :show-cancel-button='true' @confirm='confirmSh'>
			<view class="slot-content">
				<view style="width: 100%; margin-top: 20rpx;" class="flexmid">
					<u-radio-group v-model="value">
						<u-radio v-for="(item, index) in radioList" :key="index" :name="item.name"
							:disabled="item.disabled" :label-disabled="false">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
				<view class="flex" style="align-items: flex-start; padding: 30rpx 20rpx;" v-if="value=='拒绝'">
					<view style="flex-direction: 0; margin-right: 10rpx; font-size: 24rpx;">拒绝理由:</view>
					<textarea v-model="reason" placeholder="请输入"
						style="flex: 1; border: 1rpx solid #bbb; border-radius: 6rpx; padding: 10rpx; height: 200rpx; font-size: 24rpx;" />
				</view>
				<u-gap height="20"></u-gap>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				id: '',
				item: {},
				title: '初审',
				queryForm: {
					current: 1,
					size: 10
				},
				value: '',
				radioList: [{
						name: '通过',
						disabled: false
					},
					{
						name: '拒绝',
						disabled: false
					}
				],
				reason: '',
				sel_id: ''
			}
		},
		onLoad(opt) {
			if(opt) console.log('opt:', opt)
			this.id = opt.id
		},
		onShow() {
			setTimeout(()=>{
				this.getInfo()
			}, 300)
		},
		methods: {
			review() {
				this.title = '初审'
				this.show = true
			},
			finalView() {
				this.title = '终审'
				this.show = true
			},
			confirmSh(e) {
				if (this.value === '') return this.$Toast.message('请选择是否通过')
				if (this.value === '拒绝' && this.reason === '') return this.$Toast.message('请填写拒绝理由')
				if(this.title == '初审'){
					this.$Net.post('/carRepair/firstAudit', {
						id: this.id,
						msg: this.reason,
						state: this.value === '通过' ? 'pass' : 'reject'
					}).then(res => {
						this.$Toast.messageIcon('操作成功')
						this.value = ''
						this.show = false
						this.getInfo()
					})
				}else{
					this.$Net.post('/carRepair/finalAudit', {
						id: this.id,
						msg: this.reason,
						state: this.value === '通过' ? 'pass' : 'reject'
					}).then(res => {
						this.$Toast.messageIcon('操作成功')
						this.value = ''
						this.show = false
						this.getInfo()
					})
				}
			},
			repairDone(){
				this.$Jump.Open('./repairDone?id=' + this.id)
			},
			getInfo(){
				this.$Net.get('/carRepair/detail/' + this.id). then(res=>{
					this.item = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
	page{ background-color: #f9f9f9; }
</style>

<style lang="scss" scoped>
	// @import './style.scss';
	.foot {
		width: 100%;
		padding: 30rpx;
		padding-top: 120rpx;
		.btnBox {
			width: 100%;
	
			.btn-1 {
				flex: 1;
				height: 90rpx;
				background: #1684FC;
				border-radius: 10rpx;
				color: #ffffff;
				font-size: 34rpx;
			}
	
			.btn-2 {
				flex: 1;
				height: 90rpx;
				border: 1px solid #1684FC;
				border-radius: 10rpx;
				color: #1684FC;
				font-size: 34rpx;
			}
		}
	}
	.container {
		width: 100%;
		// height: 100vh;
		padding: 20rpx;
		flex: 1;
		overflow: hidden;
	
		.item {
			width: 100%;
			border-radius: 20rpx;
			background-color: #fff;
			// padding-top: 0rpx;
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;
			position: relative;
			padding-top: 10rpx;
			.tit {
				width: 100%;
				height: 100rpx;
				border-bottom: 1rpx solid #f7f7f7;
				padding: 0 30rpx;
	
				.rili {
					width: 50rpx;
					height: 50rpx;
					margin-right: 12rpx;
				}
			}
	
			.label {
				position: absolute;
				top: 30rpx;
				right: 30rpx;
				font-size: 26rpx;
			}
	
			.item-name {
				font-weight: bold;
				font-size: 40rpx;
				color: #3F4151;
				margin-top: 26rpx;
			}
	
			.item-cell {
				margin-top: 26rpx;
				padding: 0 30rpx;
	
				.hd {
					font-size: 28rpx;
					color: #333;
					// width: 10rpx;
					flex-shrink: 0;
					font-weight: bold;
				}
	
				.bd {
					font-size: 28rpx;
					.img{
						width: 150rpx;
						height: 150rpx;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
					}
				}
	
				.carNo {
					font-size: 36rpx;
					color: #000;
					font-weight: bold;
					margin-right: 30rpx;
				}
	
				.driver {
					font-size: 28rpx;
					color: #666;
				}
			}
	
			.item-cell:first-child {
				margin-top: 0;
			}
	
			.item-btn {
				width: 100%;
				flex-direction: row-reverse;
				margin-top: 30rpx;
				padding-top: 20rpx;
				border-top: 1rpx solid #f7f7f7;
	
				.btn-1 {
					width: 140rpx;
					height: 70rpx;
					border: 2rpx solid #cbcbcb;
					border-radius: 8rpx;
					font-size: 30rpx;
					color: #777C99;
				}
	
				.btn-2 {
					width: 120rpx;
					height: 60rpx;
					border: 2rpx solid #999;
					border-radius: 8rpx;
					// font-size: 28rpx;
					color: #999;
					margin-left: 20rpx;
				}
	
				.btn-3 {
					width: 120rpx;
					height: 60rpx;
					border: 1rpx solid #40A9FF;
					border-radius: 10rpx;
					color: #40A9FF;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>
